<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">
  <title></title>
  <style>
    .sui-dialog {
      position: relative;
      z-index: 9999;
    }

    .sui-dialog * {
      box-sizing: content-box;
    }


    .sui-dialog-shade,
    .sui-dialog-model {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }


    .sui-dialog-shade {
      background: rgba(0, 0, 0, .5);
      z-index: 1;
    }

    .sui-dialog-model {
      display: table;
      font-family: Helvetica, arial, sans-serif;
      pointer-events: none;
      z-index: 2;
    }

    .sui-dialog__mian {
      display: table-cell;
      vertical-align: middle;
    }

    .sui-dialog__body {
      position: relative;
      width: 90%;
      max-width: 640px;
      margin: auto;
      overflow: hidden;
      pointer-events: auto;
      -webkit-overflow-scrolling: touch;
      animation-fill-mode: both;
      animation-duration: 0.2s;
    }


    @keyframes suiDialogAnimAcale {
      0% {
        opacity: 0;
        transform: scale(0.5);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .sui-dialog-anim-scale {
      animation-name: suiDialogAnimAcale;
      -webkit-animation-name: suiDialogAnimAcale;
    }

    .sui-dialog__content,
    .sui-dialog__content2 {
      background-color: #fff;
    }

    .sui-dialog__content {
      padding: 15px 20px;
      border-radius: 4px;
      font-size: 14px;
    }
  </style>
  <style>
    .lgg-dialog {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;

      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;


      position: relative;
      padding: 15px;
      background: #342a3e;
      color: #fff;
    }

    .lgg-dialog__icon {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      overflow: hidden;
      border-radius: 50%;
    }

    .lgg-dialog__icon img {
      width: 100%;
      height: 100%;
    }

    .lgg-dialog__title {
      margin: 0;
      font-size: 16px;
    }

    .lgg-dialog__subTitle {
      margin: 0;
      font-size: 12px;
    }

    .lgg-dialog__score {
      position: absolute;
      right: 0;
      top: 20px;
      padding: 0 15px;
      border-left: 1px solid #999999;
      font-size: 24px;
    }

    .lgg-dialog__desc {
      padding: 10px 15px;
      background-color: #fff;
    }

    .lgg-dialog__desc>p {
      margin: 0;
      line-height: 2;
    }

    .lgg-dialog__btns {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;

      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;

      background: #342a3e;
      color: #fff;
    }

    .lgg-dialog__btn {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;

      padding: 10px;
      text-align: center;
      font-size: 16px;
    }

    .lgg-dialog__btn+.lgg-dialog__btn {
      border-left: 1px solid #999999;
    }
  </style>
</head>

<body>

  <!-- <div class="sui-dialog">
    <div class="sui-dialog-shade"></div>
    <div class="sui-dialog-model">
      <div class="sui-dialog__mian">
        <div class="sui-dialog__body sui-dialog-anim-scale">
          <div class="sui-dialog__content">

            <div>
              <div class="lgg-dialog">

                <div class="lgg-dialog__icon">
                  <img src="https://im.icbc.com.cn/ICBCMPServer/servlet/ICBCGetAvailableImgPathServlet?dir=userinfo/1077535683_poc.jpg">
                </div>

                <div class="lgg-dialog__user">
                  <p class="lgg-dialog__title">和平</p>
                  <p class="lgg-dialog__subTitle">第1关</p>
                </div>

                <div class="lgg-dialog__score">
                  100
                  <span style="font-size:.55rem;float:right;">分</span>
                </div>

              </div>

              <div class="lgg-dialog__desc">
                <p><span>正确个数：</span><span>6个</span></p>
                <p><span>闯关用时：</span><span>9秒</span></p>
                <p><span>团队排行：</span><span>第1名</span></p>
                <p><span>世界排行：</span><span>第1名</span></p>
              </div>

              <div class="lgg-dialog__btns">
                <div class="lgg-dialog__btn" data-id="1">再玩一次</div>
                <div class="lgg-dialog__btn" data-id="2">挑战下关</div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div> -->


  <div class="sui-dialog">
    <div class="sui-dialog-shade"></div>
    <div class="sui-dialog-model">
      <div class="sui-dialog__mian">
        <div class="sui-dialog__body sui-dialog-anim-scale">
          <div class="sui-dialog__content">

            <div style="padding: 30px;">
              <i style="color:#e29f60;font-size:1.6rem;">恭喜您获得 <b>100</b> 分</i>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>


  <script>
    (function (global, factory) {
      "use strict";
      if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = factory(global, true);
      } else {
        factory(global);
      }
    }(typeof window !== "undefined" ? window : this, function (win, bool) {
      var Ready = {
        /* 默认配置 */
        config: {
          type: 0 // 0->msg，1->操作对话框，2->加载，3->自定义父容器样式
          , shade: true // 默认显示遮罩层
          , shadeClose: true // 默认一起关闭遮罩层
          , fixed: true // 固定定位
          , anim: 'scale' // 默认动画类型
          , close: true // 显示关闭按钮
        },
        timer: {},
        end: {},
        klass: { parent: 'sui-dialog', shade: 'sui-dialog-shade' },
        index: 0,
      };

      /* 拷贝对象 */
      Ready.extend = function (obj) {
        var newobj = Ready.config;
        for (var k in obj) {
          newobj[k] = obj[k];
        }
        return newobj;
      };

      /* 元素查找 */
      Ready.$ = function (selector) {
        var elems = document.querySelectorAll(selector);
        return (elems && elems.length > 0) ? elems.length === 1 ? elems[0] : elems : null;
      };

      /* 点触事件 */
      Ready.on = function (elem, fn) {
        elem && elem.addEventListener('click', function (e) {
          fn.call(this, e);
        }, false);
      };

      Ready.close = function (index, el) {
        if (!el) {
          el = Ready.$('#' + Ready.klass.shade + index);
        }
        el && document.body.removeChild(el.parentNode);
      };

      Ready.closeAll = function (index) {
        index = Ready.index;
        var el = null;
        for (let i = 0; i < index; i++) {
          Ready.close(i);
        }
      };

      var Dialog = function (options) {
        var that = this;
        that.index = Ready.index;
        that.config = Ready.extend(options || {});
        that.start();
      };

      Dialog.prototype.start = function () {
        var that = this;
        that.view();
        that.close(that.index);
        Ready.index++;
      };

      Dialog.prototype.view = function () {
        var that = this;
        var cfg = that.config;

        var parent = document.createElement('div');
        parent.id = Ready.klass.parent + Ready.index;
        parent.setAttribute('class', Ready.klass.parent);
        parent.setAttribute('data-index', Ready.index);

        var html = [];

        html.push('<div class="sui-dialog-shade" id="sui-dialog-shade' + that.index + '"></div><div class="sui-dialog-model"><div class="sui-dialog__mian"><div class="sui-dialog__body sui-dialog-anim-scale">');

        if (cfg.type === 3) {
          html.push('<div class="sui-dialog__content2">' + cfg.content + '</div>');
        } else {
          html.push('<div class="sui-dialog__content">' + cfg.content + '</div>');
        }

        html.push('</div></div></div>');

        parent.innerHTML = html.join('');
        document.body.appendChild(parent);
      };

      /* 点遮罩关闭 */
      Dialog.prototype.close = function () {
        var that = this;
        var cfg = that.config;

        if (!cfg.shade)
          return;

        var el = Ready.$('#' + Ready.klass.shade + that.index);
        Ready.on(el, function () {
          Ready.close(that.index);

          if (cfg.yes)
            cfg.yes(that.index);
          else if (cfg.no)
            cfg.no(that.index);
        });
      };

      var result = {
        v: '1.0',
        index: Ready.index,
        close: Ready.close,
        closeAll: Ready.closeAll,

        //核心方法
        open: function (options) {
          var o = new Dialog(options || {});
          return o.index;
        },
      };

      if (bool) {
        return result;
      } else {
        win.dialog = result;
      }
    })
    );
  </script>
  <script>
    // console.log('dialog:', dialog);

    // var dialog1 = dialog.open({
    //   content: '<div class="lgg-dialog"><div class="lgg-dialog__icon"><img src="https://im.icbc.com.cn/ICBCMPServer/servlet/ICBCGetAvailableImgPathServlet?dir=userinfo/1077535683_poc.jpg"></div><div class="lgg-dialog__user"><p class="lgg-dialog__title">和平</p><p class="lgg-dialog__subTitle">第1关</p></div><div class="lgg-dialog__score">              100<span style="font-size:.55rem;float:right;">分</span></div></div><div class="lgg-dialog__desc"><p><span>正确个数：</span><span>6个</span></p><p><span>闯关用时：</span><span>9秒</span></p><p><span>团队排行：</span><span>第1名</span></p><p><span>世界排行：</span><span>第1名</span></p></div><div class="lgg-dialog__btns"><div class="lgg-dialog__btn" data-id="1">再玩一次</div><div class="lgg-dialog__btn" data-id="2">挑战下关</div></div>'
    // });

    // console.log('dialog1:', dialog1);

    // var dialog2 = dialog.open(
    //   {
    //     content: '挑战下关挑战下关挑战下关挑战下关挑战下关挑战下关挑战下关挑战下关挑战下关挑战下关挑战下关'
    //     // , type: 3
    //     , no: function (index) {
    //       console.log('dialog2 no:', dialog2);
    //       console.log('dialog2 no index:', index);
    //     }
    //   },
    // );



    /*    setTimeout(function () {
         console.log('setTimeout close dialog2');
         dialog.close(dialog2);
       }, 2000); */

    // setTimeout(function () {
    //   console.log('setTimeout closeAll dialog');
    //   dialog.closeAll();
    // }, 2000);

  </script>

</body>

</html>